$(".left-menu").slimscroll({
    height: ($(window).height() - $(".header").height()) + "px",
    color: "rgba(0,0,0,0.5)"
});
$(".treeview").tree();
$(".toggle-min").click(function(e){
    e.preventDefault();
    var logo=$(".logo").parent();
    var nav_content=$(".nav-content");
    var content=$(".content");
    var isMin=logo.hasClass("collapsed-min")&&nav_content.hasClass("collapsed-min")&&content.hasClass("content-collapsed-min");
    if(isMin){
        logo.removeClass("collapsed-min");
        nav_content.removeClass("collapsed-min");
        content.removeClass("content-collapsed-min");
        $(".treeview.active").children(".treeview-menu").show();
    }else{
        logo.addClass("collapsed-min");
        nav_content.addClass("collapsed-min");
        content.addClass("content-collapsed-min");
        $(".treeview-menu").hide();
    }

});
function pie(){

    var myChart = echarts.init(document.getElementById('chars'));
    var option = {
        baseOption: {
            backgroundColor: '#2c343c',
            textStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
            },
            legend: {
                data:['baidu','google','yahoo','facebook','bing'],
                textStyle:{
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                bottom:0
            },
            series : [
                {
                    name: 'source',
                    type: 'pie',
                    roseType : 'radius',
                    radius: '80%',
                    data:[
                        {value:400, name:'baidu'},
                        {value:435, name:'google'},
                        {value:310, name:'yahoo'},
                        {value:274, name:'facebook'},
                        {value:235, name:'bing'}
                    ]
                }
            ]},
        media: [{
            query: {
                minWidth:768
            },
            option: {
                series: [{
                    radius: [30, '80%'],
                    center: ['50%', '49%']
                }]
            }
        },
            {
                query: {
                    maxWidth:500
                },
                option: {
                    series: [{
                        radius: [10, '50%'],
                        center: ['50%', '49%']
                    }]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    return myChart;
}
function areaSimple(){
    var datay=[0,2,6,9,8,0];
    var datax=[0,1,2,3,4,5,6,7];
    var datay2=[0,1,5,7,19,9,2,0];
    var myChart = echarts.init(document.getElementById('area-simple'));
    var option={
        legend: {
            data:['detail','detail2']
        },
        xAxis: {
            data: datax,
            splitLine:{show:false},
            axisTick:{show:false}
        },
        yAxis: {
            axisLine:{show:false},
            axisTick:{show:false},
            splitLine:{
                lineStyle:{

                }
            },
            splitArea:{show:true,
            areaStyle:{
                color:['rgba(250,250,250,0.3)','rgba(230,230,230,0.3)']
            }
        },type : 'value'},
        series: [
            {
                name:'detail',
                type:'line',
                smooth:true,
                symbol: 'none',
                stack: 'a',
                areaStyle: {
                    normal: {}
                },
                data: datay
            },
            {
                name:'detail2',
                type:'line',
                smooth:true,
                symbol: 'none',
                stack: 'b',
                areaStyle: {
                    normal: {}
                },
                data: datay2
            }
        ]
    };
    myChart.setOption(option);
    return myChart;
}
function bar(){
    var myChart = echarts.init(document.getElementById('bar'));
    var option={
        title: {
            text: 'Bar'
        },
        tooltip: {},
        legend: {
            data:['sales']
        },
        xAxis: {
            data: ["Dresses","Costumes","Swimwear"],
            axisTick:{show:false},
            splitLine:{show:false},
            axisLine:{
                lineStyle:{
                    color:'#675F99'
                }
            }
        },
        yAxis: {
            axisLine:{show:false},
            axisTick:{show:false},
            splitLine:{
                show: true,
                lineStyle:{
                    color:['rgba(230,230,230,0.5)','rgba(250,250,250,1)']
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(255,255,255,1)', 'rgba(240,240,240,0.5)']
                }
            }
        },
        series: [{
            name: 'sales',
            type: 'bar',
            data: [5, 20, 36],
            itemStyle:{
                normal:{
                    color:'#80DAE5'
                }

            }
        }]
    };
    myChart.setOption(option);
    return myChart;
}
function band(){
    var myChart = echarts.init(document.getElementById('band'));
    var datay=[5,2,6,9,8,0];
    var datay2=[4,7,3,9,4,5];
    var datax=[0,1,2,3,4,5,6,7];
    var option={
        legend: {
            data:['detail','detail2']
        },
        xAxis: {
            data: datax,
            splitLine:{show:false},
            axisTick:{show:false},
            axisLine:{
                lineStyle:{
                    color:'#675F99'
                }
            }
        },
        yAxis: {
            axisLine:{show:false},
            axisTick:{show:false},
            splitLine:{
                lineStyle:{
                    color:['rgba(230,230,230,0.5)','rgba(250,250,250,1)']
                }
            },
            splitArea:{show:true,
                areaStyle:{
                    color: ['rgba(255,255,255,1)', 'rgba(240,240,240,0.5)']
                }
            },type : 'value'},
        series: [
            {
                name:'detail',
                type:'line',
                smooth:true,
                symbol: 'none',
                stack: 'a',
                data: datay,
                lineStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                }
            },
            {
                name:'detail2',
                type:'line',
                smooth:true,
                symbol: 'none',
                stack: 'b',
                data: datay2,
                lineStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                }
            }
        ]
    }
    myChart.setOption(option);
    return myChart;
}
function gauge(){
    var myChart = echarts.init(document.getElementById('gauge'));
    option = {
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true}
            }
        },
        series : [
            {
                name:'speed',
                type:'gauge',
                z: 3,
                min:0,
                max:220,
                splitNumber:11,
                radius: '90%',
                axisLine: {
                    lineStyle: {
                        width: 10
                    }
                },
                axisTick: {
                    length :15,
                    lineStyle: {
                        color: '#80DAE5'
                    }
                },
                splitLine: {
                    length :20,
                    lineStyle: {
                        color: '#80DAE5'
                    }
                },
                itemStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                },
                title : {
                    textStyle: {
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail : {
                    textStyle: {
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 40, name: 'km/h'}]
            }
        ]
    };
    myChart.setOption(option);
    return myChart;
}

function homeInit(){
    var c1=pie();
    var c2=areaSimple();
    var c3=bar();
    var c4=band();
    var c5=gauge();
    window.addEventListener("resize", function () {
        c1.resize();
        c2.resize();
        c3.resize();
        c4.resize();
        c5.resize();
    });

}
function formInit(){
    /******** checkbox *********/
    $('.dk-panel input').iCheck({
        checkboxClass: 'icheckbox_polaris',
        radioClass: 'iradio_polaris',
        increaseArea: '-10' // optional
    });
    $('.bcheck input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
    });

    /*********** switch *************/
    $(".jpswitch").jpswitch();
    $(".slider").slider({
        range: "min"
    });
    $(".slider2").slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ]
    });
    /*********** datepicker *************/
    $(".date").datepicker();
    /*********** ColorPickerSliders *************/
    $(".color").ColorPickerSliders({
        size: 'sm',
        color:'#363C56',
        placement: 'right',
        previewformat: 'hex',
        swatches: false,
        sliders: false,
        hsvpanel: true
    });
    $(".color2").ColorPickerSliders({
        placement: 'bottom',
        color: 'red',
        swatches: ['red', 'green', 'blue'],
        previewformat: 'hex',
        customswatches: false,
        order: {}
    });

    /*** Autocomplete demo1 ****/
    $(".autocomplete").typeahead({
        minLength: 1,
        source: {
            data: [
                "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
                "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
                "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
                "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma",
                "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad",
                "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the",
                "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti",
                "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador",
                "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon",
                "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea",
                "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India",
                "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan",
                "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos",
                "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg",
                "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands",
                "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco",
                "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger",
                "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru",
                "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino",
                "Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone",
                "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain",
                "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan",
                "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey",
                "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States",
                "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
            ]
        }
    });


    /*** Autocomplete demo2****/
    var js1={"status":true,"error":null,"data":{"beer":{"ale":["Affligem Blonde","Amsterdam Big Wheel","Amsterdam Boneshaker IPA","Amsterdam Downtown Brown","Amsterdam Oranje Summer White","Anchor Liberty Ale","Beaus Lug Tread Lagered Ale","Beerded Lady","Belhaven Best Ale","Big Rock Grasshopper Wheat","Big Rock India Pale Ale","Big Rock Traditional Ale","Big Rock Warthog Ale","Black Oak Nut Brown Ale","Black Oak Pale Ale","Boddingtons Pub Ale","Boundary Ale","Caffreys","Camerons Auburn Ale","Camerons Cream Ale","Camerons Rye Pale Ale","Ceres Strong Ale","Cheval Blanc","Crazy Canuck Pale Ale","Creemore Springs Altbier","Crosswind Pale Ale","De Koninck","Delirium Tremens","Erdinger Dunkel Weissbier","Erdinger Weissbier","Export","Flying Monkeys Amber Ale","Flying Monkeys Antigravity","Flying Monkeys Hoptical","Flying Monkeys Netherworld","Flying Monkeys Smashbomb","Fruli","Fullers Extra Spec Bitter","Fullers London Pride","Granville English Bay Pale","Granville Robson Hefeweizen","Griffon Pale Ale","Griffon Red Ale","Hacker-Pschorr Hefe Weisse","Hacker-Pschorr Munchen Gold","Hockley Dark Ale","Hoegaarden","Hops & Robbers IPA","Houblon Chouffe","James Ready Original Ale","Kawartha Cream Ale","Kawartha Nut Brown Ale","Kawartha Premium Pale Ale","Kawartha Raspberry Wheat","Keiths","Keiths Cascade Hop Ale","Keiths Galaxy Hop Ale","Keiths Hallertauer Hop Ale","Keiths Hop Series Mixer","Keiths Premium White","Keiths Red","Kilkenny Cream Ale","Konig Ludwig Weissbier","Kronenbourg 1664 Blanc","La Chouffe","La Messager Red Gluten Free","Labatt 50 Ale","Labatt Bass Pale Ale","Lakeport Ale","Leffe Blonde","Leffe Brune","Legendary Muskoka Oddity","Liefmans Fruitesse","Lions Winter Ale","Maclays","Mad Tom IPA","Maisels Weisse Dunkel","Maisels Weisse Original","Maredsous Brune","Matador 2.0 El Toro Bravo","Mcauslan Apricot Wheat Ale","Mcewans Scotch Ale","Mill St Belgian Wit","Mill St Coffee Porter","Mill St Stock Ale","Mill St Tankhouse Ale","Molson Stock Ale","Moosehead Pale Ale","Mort Subite Kriek","Muskoka Cream Ale","Muskoka Detour IPA","Muskoka Harvest Ale","Muskoka Premium Dark Ale","Newcastle Brown Ale","Niagaras Best Blonde Prem","Okanagan Spring Pale Ale","Old Speckled Hen","Ommegang Belgian Pale Ale","Ommegang Hennepin","PC IPA","Palm Amber Ale","Petrus Blonde","Petrus Oud Bruin Aged Red","Publican House Ale","Red Cap","Red Falcon Ale","Rickards Dark","Rickards Original White","Rickards Red","Rodenbach Grand Cru","Schofferhofer Hefeweizen","Shock Top Belgian White","Shock Top Raspberry Wheat","Shock Top Variety Pack","Sleeman Cream Ale","Sleeman Dark","Sleeman India Pale Ale","Smithwicks Ale","Spark House Red Ale","St. Ambroise India Pale Ale","St. Ambroise Oatmeal Stout","St. Ambroise Pale Ale","Stereovision Kristall Wheat","Stone Hammer Dark Ale","Sunny & Share Citrus Saison","Tetleys English Ale","Thirsty Beaver Amber Ale","True North Copper Altbier","True North Cream Ale","True North India Pale Ale","True North Strong","True North Wunder Weisse","Twice As Mad Tom IPA","Unibroue La Fin Du Monde","Unibroue Maudite","Unibroue Trois Pistoles","Upper Canada Dark Ale","Urthel Hop-It Tripel IPA","Waterloo IPA","Weihenstephan Kristalweiss","Wellington Arkell Best Bitr","Wellington County Dark Ale","Wellington Special Pale","Wells IPA"],"lager":["AC-DC Premium Lager","Alpine Lager","Amstel Light","Amsterdam (416) Local Lager","Amsterdam Natural Blonde","Anchor Steam Beer","Barking Squirrel Lager","Bavaria 8.6","Bavaria 8.6 Red","Bavaria Grapefruit Radler","Bavaria Premium Beer","Bavik Pils","Baysville Rock Cut Lager","Becks","Belle Gueule","Big Rock Brewmasters Selection","Big Rock Light Lime","Big Rock Saaz Republic Pilz","Birra Castello","Birra Moretti","Bitburger","Black Ice","Black Label","Blue","Blue Light","Bohemian","Boris Beer","Boris Bold Strong Beer","Boxer Ice","Boxer Lager","Brava","Brava 5.5","Brava Light","Brouczech Premium Lager","Bud Light","Bud Light Lime","Bud Light Lime Labatt","Bud Light Platinum","Budweiser","Budweiser Crown","Budweiser Shot Labatt","Busch Ice","Busch Lager","Busch Light","Camerons Dark266","Camerons Lager","Canadian","Canadian 67","Canadian 67 Sublime","Canadian Coldshots","Carib Lager","Carling Ice","Carling Lager","Carling Light","Carlsberg","Carlsberg Lite","Cool Beer Lager","Coors Banquet","Coors Light","Corona","Corona Light","Cracked Canoe","Creemore Collection","Creemore Kellerbier","Creemore Lager","Creemore Springs Combo Pack","Creemore Trad Pilsner","Creemore Urbock","Crest Super","Crystal","Czechvar","Dab Maibock","Dab Original Lager","Dead Frog Mixed Pack","Desperados Tequila Beer","Dos Equis Amber","Dos Equis Lager","Dunkel Weihenstephaner","Faxe Amber Lager","Faxe Extra Strong - 10","Faxe Premium Lager - 5","Faxe Red","Faxe Strong","Formosa Springs Draft","Fosters Import","Fuerstenberg Prem Pilsener","Get2gether","Granville Summer Mingler","Grolsch Lager 450ml","Grolsch Premium Lager","Guinness Black Lager","Hacker-Pschorr Kellerbier","Harbin Beer","Harp Lager","Heineken","Henninger Premium Lager","Hockley Taster Pack","Hofbraeu Muenchen Original","Hogsback Vintage Lager","Hollandia Pilsner","Holsten Festbock","Holsten Maibock","Holsten Premium Bier","Hopf Weisse","Hops Bolts India Pale Lager","James Ready 5.5","James Ready Ice 6.0","James Ready Lager","James Ready Light","Jever Pilsener","Keiths Brewmaster","Keiths Light","Keystone Ice","Keystone Lager","Keystone Light","King Brewery Dark Lager","King Brewery Pilsner","King Brewery Vienna Lager","Kokanee","Kozel","Krombacher Dark","Krombacher Pils","Krombacher Weizen","Kronenbourg 1664","La Tabachera","Labatt Extra Dry","Labatt Genuine Lager","Labatt Ice","Lakeport Honey Lager","Lakeport Ice","Lakeport Light","Lakeport Pilsener","Lakeport Red","Laker Extra Ice","Laker Honey","Laker Ice","Laker Lager","Laker Light","Laker Red","Laker Strong","Lech Beer","Lowenbrau","Lucky Lager","Maximum Ice","Menabrea Blonda","Michelob Ultra","Mill St Original Organic","Millennium Buzz Hemp Beer","Miller Chill Domestic","Miller Chill Import","Miller Genuine Draft Clear","Molson Canadian Wheat","Molson Dry","Molson M","Molson XXX","Mongozo Premium Pilsner","Moosehead Lager","Moosehead Light","Moosehead Light Lime","Moskato Life","Moskato Life Rose","Muskoka Craft Lager","Muskoka Summer Weiss","Muskoka Survival Pack","Mythos Beer","Negra Modelo","Neustadt Lager","Octane 7.0","Okanagan Craft Pack","Okanagan Springs 1516 Lager","Okocim Pilsner","Old Milwaukee","Old Milwaukee","Old Milwaukee Ice","Old Milwaukee Light","Old Style Pilsner","Old Vienna","PC Black Lager","PC Cerveza","PC Down Under Amber","PC Dry","PC Genuine Lager","PC Honey Red","PC Light","PC Low Carb","PC Plznr","Pabst Blue Ribbon","Pabst Blue Ribbon 5.9","Pabst Blue Ribbon Light","Paulaner Hefe-Weissbier","Pedavena Birra Dolomiti","Peroni Nastro Azzuro","Pilsner Urquell","Pistonhead Kustom Lager","Poppers Party Pack","Prison Break Pilsner","Radeberger Pilsner","Red Baron","Red Baron Light","Red Baron Lime","Red Baron Platinum Light","Red Bull","Red Stripe","Rickards Blonde","Rickards Cardigan","Rickards Fall Taster","Rickards Lederhosen","Rickards Oakhouse","Rickards Shandy","Rickards Summer Taster Pack","Rickards Taster Pack","Rickards Winter Taster Pack","Rolling Rock Pale Lager","Rosarda Rose","Saint Andre","Samuel Adams Boston Lager","San Miguel Premium Lager","Sapporo","Schnitzerbrau Gluten Free Lager","Schofferhofer Grapefruit Radlr","Seagram Mixer Pack","Shock Top Lemon Shandy","Sleeman Clear 2.0","Sleeman Honey Brown Lager","Sleeman Light","Sleeman Original Draught","Sleeman Seasonal Selections","Sleeman Selections","Sleeman Silver Creek Lager","Sol","Spaten","St Ambroise Premium Taster","Staropramen","Steam Whistle","Steeler","Stella Artois","Stella Legere","Stiegl Bier","Stiegl Grapefruit Radler","Stone Hammer Pilsner","Stonewall Light","Tecate","Tennents Export Lager","Thurn Taxis Lager","Thurn Taxis Pilsener","Thurn Taxis Wolfgang Dunkl","Tiger Beer","Trailhead Premium Lager","True North Blonde Lager","Tuborg Gold","Tuborg Pilsner","Tyskie","Unibroue Blanche Dechambly","Upper Canada Lager","Warsteiner Premium Dunkel","Warsteiner Premium Verum","Waterloo Amber Lager","Waterloo Dark","Waterloo Grapefruit Radler","Waterloo Kolsch Sampler","Waterloo Pilsner","Weihenstephan Vitus","Weihenstephaner Hefeweiss","Wernesgruner Pils","Winter Mingler","Wolfgangs German Style Beer","Xingu Black Beer","Yanjing Beer","Zywiec Beer"],"stout":["Belhaven Black Scottish Stout","Guinness Draught Bottle","Guinness Extra Stout","Guinness Pub Draught","Murphys Irish Stout","Muskoka Chocolate Cranberry","Sleeman Fine Porter"],"malt":["Boxer Watermelon","Bud Light Lime Lime-a-rita","Bud Light Lime Mang-o-rita","Bud Light Lime Straw-ber-rita","Colt 45","DJ Trotters Flirty Daiquiri","DJ Trotters Lolita","Four Loko Black Cherry","Four Loko Fruit Punch","Four Loko Grape","Four Loko Lemonade","Four Loko Peach","Four Loko Watermelon","Kensington Watermelon Wheat","Mad Jack","Mickeys","Mojo Fruit Punch","Mojo Shot Blue Lagoon","Mojo Shot Melon Ball","Mojo Shot Sourberry","Mojo Strawberry & Kiwi","Mons Abbey Blonde","Mons Abbey Witte","Olde English 800","Pepito Sangria","Poppers Cran Ice","Poppers Hard Ice","Poppers Orange Smoothie","Poppers Pink","Poppers Ricco Sangria","Poppers Wild Ice","Seagram Iced Lemon Tea","Seagram Lemon Lime","Seagram Orange Mango","Seagram Wildberry","Seagram Wildberry Extra 6.9","Twisted Tea","Wellington Iron Duke"]}}};

    $(".autocomplete1").typeahead({
        minLength: 1,
        maxItem: 15,
        order: "asc",
        hint: true,
        group: [true, "{{group}} beers!"],
        maxItemPerGroup: 5,
        backdrop: {
            "background-color": "#fff"
        },
        href: "#",
        dropdownFilter: "all beers",
        emptyTemplate: 'No result for "{{query}}"',
        source: {
            ale:{
                data:js1.data.beer.ale
            },
            lager:{
                data:js1.data.beer.lager
            },
            "stout and porter":{
                data:js1.data.beer.stout
            },
            malt:{
                data:js1.data.beer.malt
            }
        },
        callback: {
            onClickAfter: function (node, a, item, event) {

                event.preventDefault;

                // href key gets added inside item from options.href configuration
                //alert(item.href);

            }
        },
        debug: true
    });

    /*** Autocomplete demo3****/

    var js2={"status":true,"error":null,"data":{"user":[{"id":4152589,"username":"TheTechnoMan","avatar":"https:\/\/avatars2.githubusercontent.com\/u\/4152589"},{"id":748137,"username":"juliocastrop","avatar":"https:\/\/avatars3.githubusercontent.com\/u\/748137"},{"id":619726,"username":"cfreear","avatar":"https:\/\/avatars0.githubusercontent.com\/u\/619726"},{"id":906237,"username":"nilovna","avatar":"https:\/\/avatars2.githubusercontent.com\/u\/906237"},{"id":612578,"username":"Thiago Talma","avatar":"https:\/\/avatars2.githubusercontent.com\/u\/612578"},{"id":1723363,"username":"dennisgaudenzi","avatar":"https:\/\/avatars2.githubusercontent.com\/u\/1723363"},{"id":2757851,"username":"pradeshc","avatar":"https:\/\/avatars2.githubusercontent.com\/u\/2757851"}],"project":[{"id":1,"project":"jQuery Typeahead","image":"http:\/\/www.runningcoder.org\/assets\/jquerytypeahead\/img\/jquerytypeahead-preview.jpg","version":"1.7.0","demo":10,"option":23,"callback":6},{"id":2,"project":"jQuery Validation","image":"http:\/\/www.runningcoder.org\/assets\/jqueryvalidation\/img\/jqueryvalidation-preview.jpg","version":"1.4.0","demo":11,"option":14,"callback":8}]}};
    $(".autocomplete3").typeahead({
        minLength: 1,
        order: "asc",
        dynamic: true,
        delay: 500,
        backdrop: {
            "background-color": "#fff"
        },
        template: function (query, item) {

            var color = "#777";
            if (item.status === "owner") {
                color = "#ff1493";
            }

            return '<span>' +
                '<span class="avatar">' +
                '<img src="{{avatar}}">' +
                "</span>" +
                '<span class="username">{{username}} <small style="color: ' + color + ';">(true)</small></span>' +
                '<span class="id">({{id}})</span>' +
                "</span>"
        },
        source: {
            user: {
                display: "username",
                data:js2.data.user
            }
        }
    });

    /***** rating *****/
    $(".rating").jprating();

    /****** Editor *****/
    $('#some-textarea').wysihtml5();

    /********** x-editable **********/
    $('#username').editable();
    $('#firstname').editable({
        validate: function(value) {
            if($.trim(value) == '') return 'This field is required';
        }
    });

    $('#sex').editable({
        prepend: "not selected",
        source: [
            {value: 1, text: 'Male'},
            {value: 2, text: 'Female'}
        ],
        display: function(value, sourceData) {
            var colors = {"": "gray", 1: "green", 2: "blue"},
                elem = $.grep(sourceData, function(o){return o.value == value;});

            if(elem.length) {
                $(this).text(elem[0].text).css("color", colors[value]);
            } else {
                $(this).empty();
            }
        }
    });


    $('#status').editable();

    $('#group').editable({
        showbuttons: false
    });

    $('#vacation').editable({
        datepicker: {
            todayBtn: 'linked'
        }
    });

    $('#dob').editable();

    $('#event').editable({
        placement: 'right',
        combodate: {
            firstItem: 'name'
        }
    });

    $('#meeting_start').editable({
        format: 'yyyy-mm-dd hh:ii',
        viewformat: 'dd/mm/yyyy hh:ii',
        validate: function(v) {
            if(v && v.getDate() == 10) return 'Day cant be 10!';
        },
        datetimepicker: {
            todayBtn: 'linked',
            weekStart: 1
        }
    });

    $('#comments').editable({
        showbuttons: 'bottom'
    });

    $('#note').editable();
    $('#pencil').click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $('#note').editable('toggle');
    });



    $('#fruits').editable({
        pk: 1,
        limit: 3,
        source: [
            {value: 1, text: 'banana'},
            {value: 2, text: 'peach'},
            {value: 3, text: 'apple'},
            {value: 4, text: 'watermelon'},
            {value: 5, text: 'orange'}
        ]
    });

    $('#tags').editable({
        inputclass: 'input-large',
        select2: {
            tags: ['html', 'javascript', 'css', 'ajax'],
            tokenSeparators: [",", " "]
        }
    });

    var countries = [];
    $.each({"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Bartelemey", "BM": "Bermuda", "BN": "Brunei Darussalam", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "O1": "Other Country", "LV": "Latvia", "RW": "Rwanda", "RS": "Serbia", "TL": "Timor-Leste", "RE": "Reunion", "LU": "Luxembourg", "TJ": "Tajikistan", "RO": "Romania", "PG": "Papua New Guinea", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "BZ": "Belize", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "TM": "Turkmenistan", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "RU": "Russian Federation", "EE": "Estonia", "EG": "Egypt", "TK": "Tokelau", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "EU": "Europe", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova, Republic of", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania, United Republic of", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "FX": "France, Metropolitan", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands (Malvinas)", "FM": "Micronesia, Federated States of", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "CI": "Cote d'Ivoire", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos (Keeling) Islands", "CA": "Canada", "CG": "Congo", "CF": "Central African Republic", "CD": "Congo, The Democratic Republic of the", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syrian Arab Republic", "KG": "Kyrgyzstan", "KE": "Kenya", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "Korea, Republic of", "SI": "Slovenia", "KP": "Korea, Democratic People's Republic of", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "Virgin Islands, British", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Lao People's Democratic Republic", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "A1": "Anonymous Proxy", "TO": "Tonga", "LT": "Lithuania", "A2": "Satellite Provider", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libyan Arab Jamahiriya", "VA": "Holy See (Vatican City State)", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "Virgin Islands, U.S.", "IS": "Iceland", "IR": "Iran, Islamic Republic of", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AN": "Netherlands Antilles", "AQ": "Antarctica", "AP": "Asia/Pacific Region", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique"}, function(k, v) {
        countries.push({id: k, text: v});
    });
    $('#country').editable({
        source: countries,
        select2: {
            width: 200,
            placeholder: 'Select country',
            allowClear: true
        }
    });



    $('#address').editable({
        url: '#',
        value: {
            city: "Moscow",
            street: "Lenina",
            building: "12"
        },
        validate: function(value) {
            if(value.city == '') return 'city is required!';
        },
        display: function(value) {
            if(!value) {
                $(this).empty();
                return;
            }
            var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
            $(this).html(html);
        }
    });
    $("#jptags").tagsInput();
    $('[data-submenu]').submenupicker();

}
function ComponentsInit(){
    $('[data-toggle="tooltip"]').tooltip();


    $('[data-toggle="popover"]').popover();
    var progress_circular=$('[role="progress-circular"]');
    progress_circular.pgcircular();

    var t=0;
    t=window.setInterval(function(){
        var obj1=$('#progressbar1');
        var obj2=$('#progressbar2');
        var obj3=$('#progressbar3');
        var obj4=$('#progressbar4');
        var obj5=$('#progressbar5');
        var obj6=$('#progressbar6');
        var obj7=$('#progressbar7');
        var obj8=$('#progressbar8');
        var obj9=$("#progress-circular1");
        var obj10=$("#progress-circular2");
        var obj11=$("#progress-circular3");
        var obj12=$("#progress-circular4");
        var value1=obj1.attr('aria-valuenow');
        var value2=obj2.attr('aria-valuenow');
        var value3=obj3.attr('aria-valuenow');
        var value4=obj4.attr('aria-valuenow');
        var value5=obj5.attr('aria-valuenow');
        var value6=obj6.attr('aria-valuenow');
        var value7=obj7.attr('aria-valuenow');
        var value8=obj8.attr('aria-valuenow');
        var value9=obj9.attr('aria-valuenow');
        var value10=obj10.attr('aria-valuenow');
        var value11=obj11.attr('aria-valuenow');
        var value12=obj12.attr('aria-valuenow');
        value1=parseInt(value1)+1;
        value2=parseInt(value2)+1;
        value3=parseInt(value3)+1;
        value4=parseInt(value4)+1;
        value5=parseInt(value5)+1;
        value6=parseInt(value6)+1;
        value7=parseInt(value7)+1;
        value8=parseInt(value8)+1;
        value9=parseInt(value9)+1;
        value10=parseInt(value10)+1;
        value11=parseInt(value11)+1;
        value12=parseInt(value12)+1;
        if(value1>100){
            value1=45;
        }
        if(value5>100){
            value5=25;
        }
        if(value6>100){
            value6=15;
        }
        if(value7>100){
            value7=65;
        }
        if(value8>100){
            value8=25;
        }
        if(value9>100){
            value9=0;
        }
        if(value10>100){
            value10=20;
        }
        if(value11>100){
            value11=70;
        }
        if(value12>100){
            value12=50;
        }
        if(value2+value3+value4>101){
            value2=35;
            value3=20;
            value4=10;
        }
        obj1.css('width',value1+'%');
        obj1.attr('aria-valuenow',value1);
        obj2.css('width',value2+'%');
        obj2.attr('aria-valuenow',value2);
        obj3.css('width',value3+'%');
        obj3.attr('aria-valuenow',value3);
        obj4.css('width',value4+'%');
        obj4.attr('aria-valuenow',value4);
        obj5.css('width',value5+'%');
        obj5.attr('aria-valuenow',value5);
        obj6.css('width',value6+'%');
        obj6.attr('aria-valuenow',value6);
        obj7.css('width',value7+'%');
        obj7.attr('aria-valuenow',value7);
        obj8.css('width',value8+'%');
        obj8.attr('aria-valuenow',value8);
        //progress-circular
        obj9.pgcircular('update',value9);
        obj10.pgcircular('update',value10);
        obj11.pgcircular('update',value11,true);
        obj12.pgcircular('update',value12,true);
        //window.clearInterval(t);
    },100);


    //pagination
    $('#pagination1').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        first:'«',
        prev:'‹',
        next: '›',
        last: '»',
        onPageClick: function (event, page) {
            $('#page-content').text('Page ' + page);
        }
    });

    $('#pagination2').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        first:false,
        prev:'‹',
        next: '›',
        last:false,
        onPageClick: function (event, page) {
            $('#page-content2').text(page);
        }
    });

    $('#pagination3').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        first:false,
        prev:'‹',
        next: '›',
        last:false,
        onPageClick: function (event, page) {
            $('#page-content').text( page);
        }
    });
    $('#pagination4').twbsPagination({
        totalPages: 35,
        visiblePages: 7,
        first:'First',
        prev:'‹',
        next: '›',
        last:'Last',
        onPageClick: function (event, page) {
            $('#page-content').text(page);
            $("#page-total").text(35);
        }
    });

    /************* alert ************/
    $("#alert").click(function(){
        var obj=$("#showalert");
        var is_show=obj.data("isShow");

        if(is_show==null||is_show==false){
            $("#showalert").fadeIn();
            is_show=true;
        }else{
            $("#showalert").fadeOut();
            is_show=false;
        }
        obj.data("isShow",is_show);

    });
    $("#toggle").click(function(){
        var obj=$("#showalert");
        obj.slideToggle();
        var is_show=obj.data("isShow");
        if(is_show==null||is_show==false){
            is_show=true;
        }else{
            is_show=false;
        }
        obj.data("isShow",is_show);
    });
}
function ListInit(){
    $('.bcheck input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
    });
    $( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
    });


}

function PanelInit(){
    $(".jpswitch").jpswitch();
}

function treeInit(){
    glyph_opts = {
        map: {
            doc: "glyphicon glyphicon-file",
            docOpen: "glyphicon glyphicon-file",
            checkbox: "glyphicon glyphicon-unchecked",
            checkboxSelected: "glyphicon glyphicon-check",
            checkboxUnknown: "glyphicon glyphicon-share",
            dragHelper: "glyphicon glyphicon-play",
            dropMarker: "glyphicon glyphicon-arrow-right",
            error: "glyphicon glyphicon-warning-sign",
            expanderClosed: "glyphicon glyphicon-plus-sign",
            expanderLazy: "glyphicon glyphicon-plus-sign",  // glyphicon-expand
            expanderOpen: "glyphicon glyphicon-minus-sign",  // glyphicon-collapse-down
            folder: "glyphicon glyphicon-folder-close",
            folderOpen: "glyphicon glyphicon-folder-open",
            loading: "glyphicon glyphicon-refresh glyphicon-spin"
        }
    };
    $("#tree").fancytree({
        extensions: ["glyph", "wide"],
        checkbox: false,
        glyph: glyph_opts,
        selectMode: 2,
        source: [
            {"title": "Animalia", "expanded": true, "folder": true, "children": [
                {"title": "Chordate", "folder": true, "children": [
                    {"title": "Mammal", "children": [
                        {"title": "Primate", "children": [
                            {"title": "Primate", "children": [
                            ]},
                            {"title": "Carnivora", "children": [
                            ]}
                        ]},
                        {"title": "Carnivora", "children": [
                            {"title": "Felidae", "children": []}
                        ]}
                    ]}
                ]},
                {"title": "Arthropoda", "expanded": true, "folder": true, "children": [
                    {"title": "Insect", "children": [
                        {"title": "Diptera", "children": []}
                    ]}
                ]}
            ]}
        ],
        wide: {
            iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
            iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
            levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
        }
    });

    $("#tree2").fancytree({
        extensions: ["glyph", "wide"],
        checkbox: true,
        glyph: glyph_opts,
        selectMode: 3,
        source: [
            {"title": "Animalia", "expanded": true, "folder": true, "children": [
                {"title": "Chordate", "folder": true, "children": [
                    {"title": "Mammal", "children": [
                        {"title": "Primate", "children": [
                            {"title": "Primate", "children": [
                            ]},
                            {"title": "Carnivora", "children": [
                            ]}
                        ]},
                        {"title": "Carnivora", "children": [
                            {"title": "Felidae", "children": []}
                        ]}
                    ]}
                ]},
                {"title": "Arthropoda", "expanded": true, "folder": true, "children": [
                    {"title": "Insect", "children": [
                        {"title": "Diptera", "children": []}
                    ]}
                ]}
            ]}
        ],
        wide: {
            iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
            iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
            levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
        }
    });

    $("#tree3").fancytree({
        extensions: ["glyph", "wide"],
        checkbox: true,
        glyph: glyph_opts,
        selectMode: 1,
        source: [
            {"title": "Animalia", "expanded": true, "folder": true, "children": [
                {"title": "Chordate", "folder": true, "children": [
                    {"title": "Mammal", "children": [
                        {"title": "Primate", "children": [
                            {"title": "Primate", "children": [
                            ]},
                            {"title": "Carnivora", "children": [
                            ]}
                        ]},
                        {"title": "Carnivora", "children": [
                            {"title": "Felidae", "children": []}
                        ]}
                    ]}
                ]},
                {"title": "Arthropoda", "expanded": true, "folder": true, "children": [
                    {"title": "Insect", "children": [
                        {"title": "Diptera", "children": []}
                    ]}
                ]}
            ]}
        ],
        wide: {
            iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
            iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
            levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
        }
    });

    $("#tree4").fancytree({
        extensions: ["glyph", "wide","dnd","edit"],
        checkbox: true,
        glyph: glyph_opts,
        selectMode: 1,
        source: [
            {"title": "Animalia", "expanded": true, "folder": true, "children": [
                {"title": "Chordate", "folder": true, "children": [
                    {"title": "Mammal", "children": [
                        {"title": "Primate", "children": [
                            {"title": "Primate", "children": [
                            ]},
                            {"title": "Carnivora", "children": [
                            ]}
                        ]},
                        {"title": "Carnivora", "children": [
                            {"title": "Felidae", "children": []}
                        ]}
                    ]}
                ]},
                {"title": "Arthropoda", "expanded": true, "folder": true, "children": [
                    {"title": "Insect", "children": [
                        {"title": "Diptera", "children": []}
                    ]}
                ]}
            ]}
        ],
        wide: {
            iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
            iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
            levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
        },
        dnd: {
            autoExpandMS: 400,
            focusOnClick: true,
            preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
            preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
            dragStart: function(node, data) {
                /** This function MUST be defined to enable dragging for the tree.
                 *  Return false to cancel dragging of node.
                 */
                return true;
            },
            dragEnter: function(node, data) {
                /** data.otherNode may be null for non-fancytree droppables.
                 *  Return false to disallow dropping on node. In this case
                 *  dragOver and dragLeave are not called.
                 *  Return 'over', 'before, or 'after' to force a hitMode.
                 *  Return ['before', 'after'] to restrict available hitModes.
                 *  Any other return value will calc the hitMode from the cursor position.
                 */
                // Prevent dropping a parent below another parent (only sort
                // nodes under the same parent)
                /*           if(node.parent !== data.otherNode.parent){
                 return false;
                 }
                 // Don't allow dropping *over* a node (would create a child)
                 return ["before", "after"];
                 */
                return true;
            },
            dragDrop: function(node, data) {
                /** This function MUST be defined to enable dropping of items on
                 *  the tree.
                 */
                data.otherNode.moveTo(node, data.hitMode);
            }
        }
    });
}

function ProfileInit(){
    $('.bcheck input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
    });
}
function InvoiceInit(){
    $("#print").click(function(){
        var invoice=$(".invoice").clone();
        var head=$("head");
        invoice.find(".no-print").remove();
        var open=window.open("", "print");
        open.document.write('<!DOCTYPE html><html lang="en"><head>'+head.html()+'</head><body><div class="invoice jp-print" style="padding:0px 15px;">'+invoice.html()+'</div></body></html>');
        open.print();
    });
}

function DataTablesInit(){
    $('#example').DataTable();
}


function FormComponentsInit(){
    $(".email").email_validation(function(obj){
        login_validation();
    });
    $(".password").len_validation(function(obj){
        login_validation();
    });
    $("#revert").click(function(){
        $(".login-form").find("input").val("");
    });
    $(".credit-card").card_nums_validation();
    $(".credit-card-name").card_name_validation();
    $(".credit-card-expiry").card_expiry_validation();
    $(".credit-card-cvc").card_cvc_validation();
    $(".sign-mail").email_validation(function(obj){
        sign_login_validation();
    });
    $(".sign-len").len_validation(function(obj){
        sign_login_validation();
    });
    $(".touchspin").touchspin();
}
function sign_login_validation(){
    var p=true;
    $(".sign-login-form").find("input[required]").each(function(){
        var pass=$(this).data("pass");
        if(!pass){
            p=false;
        }
    });
    if(p==true){
        $("#sign-login-button").removeAttr("disabled");
    }else{
        $("#sign-login-button").attr("disabled","disabled");
    }
}
function login_validation(){
    var p=true;
    $(".login-form").find("input[required]").each(function(){
        var pass=$(this).data("pass");
        if(!pass){
            p=false;
        }
    });
    if(p==true){
        $("#login_btn").removeAttr("disabled");
    }else{
        $("#login_btn").attr("disabled","disabled");
    }
}
function  WizardFormInit(){
    $(".step-wrap").wizardform();
}

function ECharsLineInit(){
    base_line();
    stacked_line();
    base_area();
    stacked_area();
}

/*********BASE LINE*********/
function base_line(){
    var myChart = echarts.init(document.getElementById('base-line'));
    var option={
        legend: {
            data:['Pre order','intention']
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor:'rgba(0,0,0,0.3)',
            axisPointer:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#eee"
                }
            },
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            },
            data: ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.']
        },
        yAxis: {
            type: 'value',
            splitArea:{
                show:true,
                areaStyle:{
                    color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:["#eee","#eee"]
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        series: [
            {
                name: 'Pre order',
                type: 'line',
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#2EC7C9'
                    }
                },
                lineStyle:{
                    normal:{
                        color:'#2EC7C9'
                    }
                },
                data: [130, 1182, 1434, 1791, 1390, 30, 10],
                markLine: {
                    data: [
                        {type: 'average', name: 'average'}
                    ],
                    lineStyle:{
                        normal:{
                            color:'#C9BAE7'
                        }
                    }
                },
                markPoint:{
                    data: [
                        {type: 'max', name: 'max'},
                        {type: 'min', name: 'min'}
                    ]
                }
            },
            {
                name: 'intention',
                type: 'line',
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#B6A2DE'
                    }
                },
                lineStyle:{
                    normal:{
                        color:'#C9BAE7'
                    }
                },
                data: [1320, 1132, 601, 234, -120, -90, 20],
                markLine: {
                    data: [
                        {type: 'average', name: 'average'}
                    ],
                    lineStyle:{
                        normal:{
                            color:'#C9BAE7'
                        }
                    }
                },
                markPoint:{
                    data: [
                        {type: 'max', name: 'max'},
                        {type: 'min', name: 'min'}
                    ]
                }
            }]
    };
    myChart.setOption(option);
}

/*********STACKED LINE*********/
function stacked_line(){
    var myChart = echarts.init(document.getElementById('stacked-line'));
    var option={
        legend: {
            data:['email','sales','comment','search','collection']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#eee"
                }
            },
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            },
            data: ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.']
        },
        yAxis: {
            type: 'value',
            splitArea:{
                show:true,
                areaStyle:{
                    color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:["#eee","#eee"]
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        series: [
            {
                name:'email',
                type:'line',
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                },
                data:[20, 122, 101, 34, 90, 100, 50]
            },
            {
                name:'sales',
                type:'line',
                itemStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                },
                data:[60, 132, 121, 40, 100, 106, 100]
            },
            {
                name:'comment',
                type:'line',
                itemStyle:{
                    normal:{
                        color:'#68DEBB'
                    }
                },
                data:[140, 142, 131, 50, 140, 150, 160]
            },
            {
                name:'search',
                type:'line',
                itemStyle:{
                    normal:{
                        color:'#FF8441'
                    }
                },
                data:[160, 162, 141, 68, 150, 162, 180]
            },
            {
                name:'collection',
                type:'line',
                itemStyle:{
                    normal:{
                        color:'#F6565A'
                    }
                },
                data:[180, 182, 151, 100, 190, 170, 210]
            }
        ]
    };
    myChart.setOption(option);
}
/*********BASE AREA*********/
function base_area(){
    var myChart = echarts.init(document.getElementById('base-area'));
    var option={

        legend: {
            data:['deal','Pre order','intention']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#eee"
                }
            },
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            },
            data: ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.']
        },
        yAxis: {
            type: 'value',
            splitArea:{
                show:true,
                areaStyle:{
                    color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:["#eee","#eee"]
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        series: [
            {
                name:'deal',
                type:'line',
                areaStyle: {normal: {}},
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                },
                data: [10, 12, 21, 54, 260, 830, 710]
            },
            {
                name:'Pre order',
                type:'line',
                areaStyle: {normal: {}},
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                },
                data: [30, 182, 434, 791, 390, 30, 10]
            },
            {
                name:'intention',
                type:'line',
                areaStyle: {normal: {}},
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#68DEBB'
                    }
                },
                data: [1320, 1132, 601, 234, 120, 90, 20]
            }
        ]
    }
    myChart.setOption(option);
}

/*********STACKED AREA*********/
function stacked_area(){
    var myChart = echarts.init(document.getElementById('stacked-area'));
    var option={
        legend: {
            data:['email','sales','comment']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#eee"
                }
            },
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            },
            data: ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.']
        },
        yAxis: {
            type: 'value',
            splitArea:{
                show:true,
                areaStyle:{
                    color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:["#eee","#eee"]
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        series: [
            {
                name:'email',
                type:'line',
                areaStyle: {normal: {}},
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                },
                data:[20, 122, 101, 34, 90, 100, 50]
            },
            {
                name:'sales',
                type:'line',
                areaStyle: {normal: {}},
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                },
                data:[60, 132, 121, 40, 100, 106, 100]
            },
            {
                name:'comment',
                type:'line',
                areaStyle: {normal: {}},
                smooth: true,
                itemStyle:{
                    normal:{
                        color:'#68DEBB'
                    }
                },
                data:[140, 142, 131, 50, 140, 150, 160]
            }
        ]
    };
    myChart.setOption(option);
}


function ECharsBarInit(){
    base_column();
    stacked_column();
    base_bar();
    stacked_bar();
    tornado();
}
/**************BASIC COLUMN**********/
function base_column(){
    var myChart = echarts.init(document.getElementById('base-column'));
    var option={
        title : {
        },
        tooltip : {
            trigger: 'axis',
            axisPointer:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        legend: {
            data:['Evaporation','precipitation']
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false,title:"dataView"},
                magicType : {show: true, type: ['line', 'bar'],title:"magicType"},
                restore : {show: true,title:"restore"},
                saveAsImage : {show: true,title:"saveAsImage"}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:"#eee"
                    }
                },
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                },
                data : ['Jan.','Feb.','Mar.','Apr.','May.','Jun.','Jul.','Aug.','Sep.','Oct.','Nov.','Dec.']
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                    }
                },
                axisTick:{
                    show:false
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:["#eee","#eee"]
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                }
            }
        ],
        series : [
            {
                name:'Evaporation',
                type:'bar',
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                },
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint : {
                    data : [
                        {type : 'max', name: 'max'},
                        {type : 'min', name: 'min'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: 'average'}
                    ]
                }
            },
            {
                name:'precipitation',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                itemStyle:{
                    normal:{
                        color:'#5acfdd'
                    }
                },
                markPoint : {
                    data : [
                        {name : 'Highest', value : 182.2, xAxis: 7, yAxis: 183},
                        {name : 'Lowest', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : 'average'}
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
}
/*********STACKED COLUMN**************/
function stacked_column(){
    var myChart = echarts.init(document.getElementById('stacked-column'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['Direct','Email','Affiliate','Video','Search','Baidu','Google','Bing','Other']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.'],
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:"#eee"
                    }
                },
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                    }
                },
                axisTick:{
                    show:false
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:["#eee","#eee"]
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                }
            }
        ],
        series : [
            {
                name:'Direct',
                type:'bar',
                data:[320, 332, 301, 334, 390, 330, 320],
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                }
            },
            {
                name:'Email',
                type:'bar',
                stack: 'Affiliate',
                data:[120, 132, 101, 134, 90, 230, 210],
                itemStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                }
            },
            {
                name:'Affiliate',
                type:'bar',
                stack: 'Affiliate',
                data:[220, 182, 191, 234, 290, 330, 310],
                itemStyle:{
                    normal:{
                        color:'#68DEBB'
                    }
                }
            },
            {
                name:'Video',
                type:'bar',
                stack: 'Affiliate',
                data:[150, 232, 201, 154, 190, 330, 410],
                itemStyle:{
                    normal:{
                        color:'#FF8441'
                    }
                }
            },
            {
                name:'Search',
                type:'bar',
                data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                markLine : {
                    lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },
                    data : [
                        [{type : 'min'}, {type : 'max'}]
                    ]
                },
                itemStyle:{
                    normal:{
                        color:'#F6565A'
                    }
                }
            },
            {
                name:'Baidu',
                type:'bar',
                barWidth : 5,
                stack: 'Search',
                data:[620, 732, 701, 734, 1090, 1130, 1120],
                itemStyle:{
                    normal:{
                        color:'#FFC42A'
                    }
                }
            },
            {
                name:'Google',
                type:'bar',
                stack: 'Search',
                data:[120, 132, 101, 134, 290, 230, 220],
                itemStyle:{
                    normal:{
                        color:'#675F99'
                    }
                }
            },
            {
                name:'Bing',
                type:'bar',
                stack: 'Search',
                data:[60, 72, 71, 74, 190, 130, 110],
                itemStyle:{
                    normal:{
                        color:'#363C56'
                    }
                }
            },
            {
                name:'Other',
                type:'bar',
                stack: 'Search',
                data:[62, 82, 91, 84, 109, 110, 120],
                itemStyle:{
                    normal:{
                        color:'#00B0F6'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
/*********BASIC BAR**************/
function base_bar(){
    var myChart = echarts.init(document.getElementById('base-bar'));
    option = {
        title: {
            text: 'World population',
            subtext: 'From Internet'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['2011', '2012']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#eee"
                }
            },
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['Brazil','Indonesia','U.S.A','India','China','Population(10k)'],
            splitArea:{
                show:true,
                areaStyle:{
                    color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:["#eee","#eee"]
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230],
                itemStyle:{
                    normal:{
                        color:'#00B0F6'
                    }
                }
            },
            {
                name: '2012',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807],
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
}
/*********STACKED BAR**************/
function stacked_bar(){
    var myChart = echarts.init(document.getElementById('stacked-bar'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        legend: {
            data: ['Direct', 'Email','Affiliate','Video','Search']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis:  {
            type: 'value',
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#eee"
                }
            },
            axisTick:{
                show:false
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        yAxis: {
            type: 'category',
            data: ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.'],
            splitArea:{
                show:true,
                areaStyle:{
                    color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                }
            },
            axisTick:{
                show:false
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:["#eee","#eee"]
                }
            },
            axisLine:{
                lineStyle:{
                    color:"#008ACD",
                    width:2
                }
            }
        },
        series: [
            {
                name: 'Direct',
                type: 'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [320, 302, 301, 334, 390, 330, 320],
                itemStyle:{
                    normal:{
                        color:'#68DEBB'
                    }
                }
            },
            {
                name: 'Email',
                type: 'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210],
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                }
            },
            {
                name: 'Affiliate',
                type: 'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [220, 182, 191, 234, 290, 330, 310],
                itemStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                }
            },
            {
                name: 'Video',
                type: 'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [150, 212, 201, 154, 190, 330, 410],
                itemStyle:{
                    normal:{
                        color:'#FF8441'
                    }
                }
            },
            {
                name: 'Search',
                type: 'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: [820, 832, 901, 934, 1290, 1330, 1320],
                itemStyle:{
                    normal:{
                        color:'#F6565A'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
/*********TORNADO**************/
function tornado(){
    var myChart = echarts.init(document.getElementById('tornado'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['profit', 'Cost', 'Income']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'value',
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:"#eee"
                    }
                },
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'category',
                axisTick : {show: false},
                data : ['Mon.','Tue.','Wed.','Thu.','Fri.','Sat.','Sun.'],
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                    }
                },
                axisTick:{
                    show:false
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:["#eee","#eee"]
                    }
                }

            }
        ],
        series : [
            {
                name:'profit',
                type:'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                },
                data:[200, 170, 240, 244, 200, 220, 210],
                itemStyle:{
                    normal:{
                        color:'#68DEBB'
                    }
                }
            },
            {
                name:'Income',
                type:'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true
                    }
                },
                data:[320, 302, 341, 374, 390, 450, 420],
                itemStyle:{
                    normal:{
                        color:'#675F99'
                    }
                }
            },
            {
                name:'Cost',
                type:'bar',
                stack: 'total',
                label: {
                    normal: {
                        show: true,
                        position: 'left'
                    }
                },
                data:[-120, -132, -101, -134, -190, -230, -210],
                itemStyle:{
                    normal:{
                        color:'#80DAE5'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}

function ECharsPieInit(){
    base_pie();
    doughnut();
    nightingale();
}
/*********BASIC PIE**************/
function base_pie(){
    var myChart = echarts.init(document.getElementById('base-pie'));
    option = {
        title : {
            text: 'Traffic Source',
            x:'center',
            textStyle:{
                color:"#078DCE"
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [{name:'Direct'},{name:'Email'},{name:'Affiliate'},'Video',{name:'Search'}]
        },
        series : [
            {
                name: 'Source',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'Direct',
                        itemStyle:{
                            normal:{
                                color:'#2EC7C9'
                            }
                        }

                    },
                    {value:310, name:'Email',
                        itemStyle:{
                            normal:{
                                color:'#B6A2DE'
                            }
                        }},
                    {value:234, name:'Affiliate',
                        itemStyle:{
                            normal:{
                                color:'#5AB1EF'
                            }
                        }},
                    {value:135, name:'Video',
                        itemStyle:{
                            normal:{
                                color:'#FFB980'
                            }
                        }},
                    {value:1548, name:'Search',
                        itemStyle:{
                            normal:{
                                color:'#D87A80'
                            }
                        }}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}
/*********DOUGHNUT**************/
function doughnut(){
    var myChart = echarts.init(document.getElementById('doughnut'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:[{name:'Direct'},{name:'Email'},{name:'Affiliate'},'Video',{name:'Search'}]
        },
        series: [
            {
                name:'Source',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'Direct',
                        itemStyle:{
                            normal:{
                                color:'#2EC7C9'
                            }
                        }},
                    {value:310, name:'Email',
                        itemStyle:{
                            normal:{
                                color:'#B6A2DE'
                            }
                        }},
                    {value:234, name:'Affiliate',
                        itemStyle:{
                            normal:{
                                color:'#5AB1EF'
                            }
                        }},
                    {value:135, name:'Video',
                        itemStyle:{
                            normal:{
                                color:'#FFB980'
                            }
                        }},
                    {value:1548, name:'Search',
                        itemStyle:{
                            normal:{
                                color:'#D87A80'
                            }
                        }}
                ]
            }
        ]
    };
    myChart.setOption(option);
}
/*********NIGHTINGALE'S ROSE DIAGRAM**************/
function nightingale(){
    var myChart = echarts.init(document.getElementById('nightingale'));
    option = {
        title : {
            text: "NIGHTINGALE'S ROSE DIAGRAM",
            x:'center',
            textStyle:{
                color:"#078DCE"
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
            data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'radius',
                type:'pie',
                radius : [20, 110],
                center : ['25%', 200],
                roseType : 'radius',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                lableLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {value:10, name:'rose1',
                        itemStyle:{
                            normal:{
                                color:'#2EC7C9'
                            }
                        }},
                    {value:5, name:'rose2',
                        itemStyle:{
                            normal:{
                                color:'#B6A2DE'
                            }
                        }},
                    {value:15, name:'rose3',
                        itemStyle:{
                            normal:{
                                color:'#5AB1EF'
                            }
                        }},
                    {value:25, name:'rose4',itemStyle:{
                        normal:{
                            color:'#FFB980'
                        }
                    }},
                    {value:20, name:'rose5',itemStyle:{
                        normal:{
                            color:'#D87A80'
                        }
                    }},
                    {value:35, name:'rose6',itemStyle:{
                        normal:{
                            color:'#8D98B3'
                        }
                    }},
                    {value:30, name:'rose7',itemStyle:{
                        normal:{
                            color:'#E5CF0D'
                        }
                    }},
                    {value:40, name:'rose8',itemStyle:{
                        normal:{
                            color:'#97B552'
                        }
                    }}
                ]
            },
            {
                name:'area',
                type:'pie',
                radius : [30, 110],
                center : ['75%', 200],
                roseType : 'area',
                data:[
                    {value:10, name:'rose1',itemStyle:{
                        normal:{
                            color:'#2EC7C9'
                        }
                    }},
                    {value:5, name:'rose2',itemStyle:{
                        normal:{
                            color:'#B6A2DE'
                        }
                    }},
                    {value:15, name:'rose3',itemStyle:{
                        normal:{
                            color:'#5AB1EF'
                        }
                    }},
                    {value:25, name:'rose4',itemStyle:{
                        normal:{
                            color:'#FFB980'
                        }
                    }},
                    {value:20, name:'rose5',itemStyle:{
                        normal:{
                            color:'#D87A80'
                        }
                    }},
                    {value:35, name:'rose6',itemStyle:{
                        normal:{
                            color:'#8D98B3'
                        }
                    }},
                    {value:30, name:'rose7',itemStyle:{
                        normal:{
                            color:'#E5CF0D'
                        }
                    }},
                    {value:40, name:'rose8',itemStyle:{
                        normal:{
                            color:'#97B552'
                        }
                    }}
                ]
            }
        ]
    };
    myChart.setOption(option);
}
function ECharsScatterInit(){
    basic_scatter();
    basic_bubble();
}
/*********BASIC SCATTER**************/
function basic_scatter(){
    var myChart = echarts.init(document.getElementById('basic-scatter'));
    option = {
        title : {
            text: 'Height and weight distribution',
            subtext: 'Date: Heinz  2003',
            textStyle:{
                color:"#078DCE"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip : {
            trigger: 'axis',
            showDelay : 0,
            formatter : function (params) {
                if (params.value.length > 1) {
                    return params.seriesName + ' :<br/>'
                        + params.value[0] + 'cm '
                        + params.value[1] + 'kg ';
                }
                else {
                    return params.seriesName + ' :<br/>'
                        + params.name + ' : '
                        + params.value + 'kg ';
                }
            },
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            }
        },
        legend: {
            data: ['femail','male'],
            left: 'right'
        },
        xAxis : [
            {
                type : 'value',
                scale:true,
                axisLabel : {
                    formatter: '{value} cm'
                },
                splitLine: {
                    lineStyle: {
                        color:"#eee",
                        type: 'dashed'
                    }
                },
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                scale:true,
                axisLabel : {
                    formatter: '{value} kg'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color:["#eee","#eee"]
                    }
                },
                splitArea:{
                    show:true,
                    areaStyle:{
                        color:["rgba(238,238,238,0.2)","rgba(255,255,255,0.2)"]
                    }
                },
                axisTick:{
                    show:false
                },
                axisLine:{
                    lineStyle:{
                        color:"#008ACD",
                        width:2
                    }
                }
            }
        ],
        series : [
            {
                name:'femail',
                type:'scatter',
                data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
                    [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
                    [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
                    [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
                    [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
                    [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
                    [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
                    [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
                    [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
                    [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
                    [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
                    [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
                    [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
                    [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
                    [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
                    [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
                    [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
                    [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
                    [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
                    [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
                    [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
                    [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
                    [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
                    [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
                    [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
                    [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
                    [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
                    [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
                    [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
                    [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
                    [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
                    [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
                    [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
                    [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
                    [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
                    [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
                    [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
                    [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
                    [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
                    [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
                    [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
                    [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
                    [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
                    [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
                    [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
                    [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
                    [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
                    [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
                    [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
                    [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
                    [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
                    [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
                ],
                markPoint : {
                    data : [
                        {type : 'max', name: 'max'},
                        {type : 'min', name: 'min'}
                    ]
                },
                itemStyle:{
                    normal:{
                        color:'#CADB47'
                    }
                },
                markLine : {
                    data : [
                        {type : 'average', name: 'average'}
                    ]
                }
            },
            {
                name:'male',
                type:'scatter',
                data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
                    [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
                    [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
                    [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
                    [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
                    [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
                    [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
                    [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
                    [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
                    [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
                    [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
                    [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
                    [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
                    [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
                    [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
                    [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
                    [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
                    [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
                    [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
                    [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
                    [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
                    [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
                    [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
                    [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
                    [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
                    [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
                    [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
                    [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
                    [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
                    [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
                    [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
                    [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
                    [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
                    [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
                    [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
                    [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
                    [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
                    [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
                    [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
                    [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
                    [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
                    [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
                    [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
                    [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
                    [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
                    [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
                    [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
                    [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
                    [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
                    [180.3, 83.2], [180.3, 83.2]
                ],
                markPoint : {
                    data : [
                        {type : 'max', name: 'max'},
                        {type : 'min', name: 'min'}
                    ]
                },
                itemStyle:{
                    normal:{
                        color:'#B6A2DE'
                    }
                },
                markLine : {
                    data : [
                        {type : 'average', name: 'average'}
                    ]
                }
            }
        ]
    };

    myChart.setOption(option);
}
/*********BASIC BUBBLE**************/
function basic_bubble(){
    var myChart = echarts.init(document.getElementById('basic-punch'));
    var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a','10a','11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'];
    var days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

    var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
    data = data.map(function (item) {
        return [item[1], item[0], item[2]];
    });

    option = {
        title: {
            text: 'Punch Card of Github',
            textStyle:{
                color:"#078DCE"
            }
        },
        legend: {
            data: ['Punch Card'],
            left: 'right'
        },
        tooltip: {
            position: 'top',
            formatter: function (params) {
                return params.value[2] + ' commits in ' + hours[params.value[0]] + ' of ' + days[params.value[1]];
            }
        },
        grid: {
            left: 2,
            bottom: 10,
            right: 10,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: hours,
            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ddd',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: days,
            axisLine: {
                show: false
            }
        },
        series: [{
            name: 'Punch Card',
            type: 'scatter',
            symbolSize: function (val) {
                return val[2] * 2;
            },
            data: data
        }]
    };
    myChart.setOption(option);
}